import { createContext, useContext, useMemo } from 'react';

type TComplexObject = {
  kind: string;
};

const Context = createContext<TComplexObject | null>(null);

const useGetComplexObject = () => {
  const object = useContext(Context);
  if (!object) {
    throw new Error('useGetComplexObject must be used within a ComplexObjectProvider');
  }
  return object;
};
function MyComponent() {
  const object = useGetComplexObject();
  return (
    <div>
      <div>这是MyComponent组件，接收通信</div>
      <p>Current object:{object.kind}</p>
    </div>
  );
}

export default function Demo2() {
  const object = useMemo(() => ({ kind: 'light' }), []);
  return (
    <div>
      <h1>useContext 结合ts练习，useContext父子 祖孙通信 </h1>
      <Context.Provider value={object}>
        <MyComponent />
      </Context.Provider>
    </div>
  );
}
